<script setup lang="ts">
import { reactive,onMounted, ref } from 'vue'
import { update_pwd } from '@/axios/api/acl/adduser'
import { ElNotification } from 'element-plus';
import useUserStore from '@/store/user';
const userStore = useUserStore();


onMounted(()=> {
    form.UserNumber = userStore.UserNumber
})

const form = reactive({
    UserNumber: '',
    newpwd: '',
    againpwd: ''
})

const newpwd = (_rule: any, value: any, callback: any) => {
       // 密码长度验证
       if (value.length < 6) {
           callback(new Error('密码长度不能小于6位'))
       } else {
           callback() //通过
       }
   }
const againpwd = (_rule: any, value: any, callback: any) => {
        // 两次密码是否一致验证
        if (value !== form.newpwd) {
            callback(new Error('两次密码输入不一致'))
        } else {
            callback() //通过
        }
   }
    


const rules = {
    newpwd: [
            { validator: newpwd, trigger: 'change' }
        ],
    againpwd: [
            { validator: againpwd, trigger: 'change' }
        ]
    }
let formRef: any = ref() // 新增抽屉表单对象

async function handleadpwd() {
    await formRef.value.validate();
    const res = await update_pwd({UserNumber: form.UserNumber, newpwd: form.newpwd})
    if (res.code === 200) {
        ElNotification({
            title: '成功',
            message: '修改密码成功,请重新登录',
            type:'success'
        })
    } else {
        ElNotification({
            title: '修改密码失败',
            message: res.msg,
            type: 'error'
        })
    }
}
</script>

<template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="用户账号">
            <el-input v-model="form.UserNumber" placeholder="请输入用户账号" disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd">
            <el-input type="password" v-model="form.newpwd" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="againpwd">
            <el-input type="password" v-model="form.againpwd" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认修改密码?" @confirm="handleadpwd">
                    <template #reference>
                        <el-button type="primary" :disabled="form.UserNumber === ''">修改密码</el-button>
                    </template>
                </el-popconfirm>
        </el-form-item>
    </el-form>
</template>

<style lang="css" scoped>

</style>